<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, sinitial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{./CSS/comment.css}">
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="comment-title">
    <div class="sb-return">
        <a th:href="@{/tomany}"><img th:src="@{/comment/return.png}" alt="返回" title="返回"></a>
    </div>
    <div class="sb-author">
        <div class="sb-tou"><a href="#"><img th:src="@{/b-img/OIP-C.jpg}" alt="" title="用户头像"></a></div>
        <div class="sb-id"th:object="${userAccount}">
            <span><a href="#"th:text="${userAccount.username}">用户昵称</a></span>
        </div>
    </div>
    <div class="sb-email">
        <div class="sb-email-title"><a href="#"><img th:src="@{/comment/email.png}" alt="" title="用户邮箱"></a></div>
        <div class="sb-email-bottom"th:object="${userAccount}">
            <a href="#"><span th:text="${userAccount.email}">用户邮箱</span></a>
        </div>
    </div>
    <div class="sb-message">
        <a th:href="@{/usermessage}"><img th:src="@{/comment/space.png}" alt="点击前往用户空间" title="点击前往用户空间"></a>
    </div>
</div>
    <div class="box">
        <div class="one1">
            <!-- 一个盒子放作者的作品 -->
            <div class="works">
                <img th:src="@{/}" alt="">
            </div>
            <!-- 一个盒子放作者的文案 -->
            <div class="writter">
                <ul>
                    <li>111</li>
                </ul>
            </div>
        </div>
        <article>
            <!-- 评论回复控制层计划实现楼中楼 -->
            <div class="comment" th:object="${comment}">
                <img th:src="@{/comment/comment.png}" alt="" />
                <form th:action="@{/comment/save}" method="post">
                    评论：<br />
                    <label for="story" >写下你的评论</label>
                    <p>评论人:<span ></span></p>
                    <p>评论时间:<span ></span></p>
                    <textarea id="story" name="story" rows="6" cols="122" placeholder="网络注意文明用语..."  ></textarea>
                    <br /><br />
                    <input type="submit" value="提交" />
                </form>
            </div>
        </article>
        <hr>
        <br>
        <div class="conta" th:each="AuserComments : ${userComments} " >
            <div class="me">
                <img src="./b-img/th1.jpg" alt=""/>
            </div>
            <div class="me-title"th:text="${AuserComments.commenter}"></div>
            <div class="me-body"th:text="${AuserComments.commentInfo}"></div>
            <br>

            <div class="return">
                <a href="#p1">回复</a>
            </div>
            <br>
            <hr>
            <div class="me-reply" id="p1">
               <form action="">
                   <label>写下你的回复</label>
                   <br>
                   <textarea style="resize:none;" id="s" name="story" rows="6" cols="122"placeholder="网络注意文明用语..."></textarea>
                   <br/>
                   <input type="submit" value="提交" />
               </form>
            </div>

        </div>


<!--        <div class="container" >-->
<!--            <div class="media" th:each="AuserComments : ${userComments} " style="display: none">-->
<!--                <div class="media-left media-top">-->
<!--                    <img th:src="@{https://static.runoob.com/images/mix/img_avatar.png}" class="media-object"-->
<!--                         style="width:80px">-->
<!--                </div>-->
<!--                <div class="media-body">-->
<!--                    <h4 class="media-heading" >用户名:<span th:text="${AuserComments.commenter}"></span></h4>-->
<!--                    <p th:text="${AuserComments.commentInfo}"></p>-->
<!--                    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>-->
<!--                    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>-->
<!--                </div>-->
<!--                <button id="open">回复</button>-->
<!--                <div id="container" style="display: none;">-->
<!--                    <div id="box2">-->
<!--                        <button id="close">-->
<!--                            关闭-->
<!--                        </button>-->
<!--                        <img src="comment/comment.png" alt="">-->
<!--                        <form action="">-->
<!--                            评论：<br />-->
<!--                            <label for="s">写下你的评论</label>-->
<!--                            <textarea style="resize:none;" id="s" name="story" rows="4"-->
<!--                                      cols="122">网络注意文明用语...</textarea>-->
<!--                            <br/><br />-->
<!--                            <input type="submit" value="提交" />-->
<!--                        </form>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <hr>-->
<!--        </div>-->
    </div>
<!--<script>-->
<!--    // 获取三个元素事件-->
<!--    var dianji = document.getElementById("open");-->
<!--    var hezi = document.getElementById("container");-->
<!--    var guanbi = document.getElementById("close");-->

<!--    // 给外层点击按钮添加绑定事件-->
<!--    dianji.onclick = function () {-->
<!--        hezi.style.display = "block"-->
<!--        // 改变大盒子的属性-->
<!--    }-->

<!--    // 给内层关闭按钮添加绑定事件-->
<!--    guanbi.onclick = function () {-->
<!--        hezi.style.display = "none"-->
<!--        // 改变大盒子的属性-->
<!--    }-->

<!--</script>-->
</body>

</html>